<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">
<h:head>
	<title>Aplicacion con RichFaces</title>
</h:head>
<h:body>
	<h:outputStylesheet library="css" name="application.css" target="head" />
	<f:view>
		<div align="center">
			<rich:panel style="width:50%">
				<f:facet name="header">
					<h:outputText value="Chat" />
				</f:facet>
				<h:form>
					<h:panelGrid columns="2">
						<h:outputText value="Nombre: " />
						<h:inputText value="#{pushBean.nombre}" required="true"
							requiredMessage="Escriba su nombre, por favor" />
						<h:messages />
					</h:panelGrid>
					<h:inputTextarea id="txtMensaje" value="#{pushBean.mensaje}"
						required="true" requiredMessage="Escriba un mensaje, por favor" />
					<a4j:commandButton execute="@form"
						action="#{pushBean.publicarMensaje}"
						render="txtMensaje"
						value="Publicar" />
					<a4j:push address="chat" >
						<a4j:ajax event="dataavailable" render="tblMensajes" />
					</a4j:push>
				</h:form>
				<rich:dataTable id="tblMensajes" style="width:90%;"
					value="#{pushBean.listaMensajes}" var="msg">
					<h:column>
						<f:facet name="header">
							<h:outputText value="Hora" />
						</f:facet>
						<h:outputText value="#{msg.hora}">
							<f:convertDateTime type="time" timeStyle="medium" locale="es_MX" />
						</h:outputText>
					</h:column>
					<h:column>
						<f:facet name="header">
							<h:outputText value="Autor" />
						</f:facet>
						<h:outputText value="#{msg.autor}" />
					</h:column>
					<h:column>
						<f:facet name="header">
							<h:outputLabel value="Mensajes" style="width:65%"/>
						</f:facet>
						<h:outputText value="#{msg.mensaje}" />
					</h:column>
				</rich:dataTable>
			</rich:panel>
		</div>
	</f:view>
</h:body>
</html>